<template>
  <div>
    <!-- v-cloak -->
    <!-- <p>{{msg}}</p> -->

    <!-- <ul>
      <li v-for="item in nameArr">
        <template v-if='item.age>35'>
        {{item.name}}--{{item.age}}
       </template> 
        </li>
    </ul> -->
    <!-- v-model -->
    <!-- 01: input-->
    <!-- <input type="text"  :value='username' @input='username=$event.target.value'/> -->
    <!-- 语法糖的写法 -->
    <!-- <input type="text"  v-model='username'> -->
    <!-- 02: 复选框 -->
    <!-- <input type="checkbox" v-model='checkboxflag'>是否选中 -->
     <!-- 03:多个复选框 -->
     <!-- <p>
        <input  type="checkbox"  value="别墅" v-model='checkboxArr'> 别墅
        <input  type="checkbox"  value='money'  v-model='checkboxArr'> money
        <input type="checkbox"   value='美女'  v-model='checkboxArr'> 美女
     </p> -->
     <!-- 04: 单选框 -->
     <!-- <p>
        <input type="radio" value='男' v-model='radioChecked' name='sex'>男
        <input type="radio" value='女' v-model='radioChecked' name='sex'>女
     </p> -->

     <!-- 05:下拉框 -->
      <!-- <select :value='selectedvalue' >
            <option value='江山'>江山</option>
            <option value='美人'>美人</option>
            <option value='兄弟'>兄弟</option>
      </select>-->
      <!-- 在自定义组件上使用v-model 相当于语法糖-->
      <!-- <Mycom v-model='username' ></Mycom> -->
      <!-- <Mycom :value='username' @inp123 = 'getdata' ></Mycom> -->

    <!-- 06:attrs -->
    <!-- 默认父传子的所有的属性都存在子组件的vm.$attrs上, 如果在子组件中接收了prop属性, 则该属性就
      就不存放在$attrs属性集合中了,
      父传子的一种方式
     -->
    <!-- <Mycom1 :count='count' :username='username'></Mycom1>
    <button @click='count++'>点击修改count</button> -->
    <!-- 07:插值表达式不编译 -->
    <!-- <p v-pre>{{msg}}</p> -->
    <!-- 08:v-once  只编译一次-->
    <!-- <p @click='count++' v-once>{{count}}</p> -->

  </div>
</template>

<script>
// import Mycom from '@/components/Mycom.vue'
import Mycom1 from '@/components/Mycom1'
export default{
data(){
     return {
        msg:'123',
        nameArr:[
            {
              id:1,
              name:'刘备',
              age:40
            },
             {
              id:2,
              name:'关羽',
              age:35
            },
            {
              id:3,
              name:'张飞',
              age:30
            }

        ],
        username:'吕布',
        // checkboxflag:true,
        checkboxArr:['别墅','美女'],
        radioChecked:'女',
        selectedvalue:'兄弟',
        cheboxflag:true,
        count:100
     }
  },
  components:{
    // Mycom,
    Mycom1
  },
  methods:{
      getdata(data){
          this.username = data
      }
  },
  mounted(){
    console.log('this-zhiling',this);
  }
 }

</script>
<style scoped>
li{
  list-style: none;
}
</style>